<template>
  <el-menu background-color="#263238" text-color="#fff" mode="horizontal" :ellipsis="false" @select="handleSelect">
    <el-menu-item index="0">在线教育后台管理系统</el-menu-item>
    <div class="flex-grow" />
    <el-sub-menu >
      <template #title>{{info.username}}</template>
      <el-menu-item index="#">个人信息</el-menu-item>
      <el-menu-item @click="logout">退出</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import userApi from '../api/public/public.js'
import Cookies from 'js-cookie'
const token = Cookies.get('token')
let props= defineProps({
    info:{
      type:Object,
      default:{}
    },
    token:{
      type:String,
      default:""
    }
  });
  let logout=()=>{
     userApi.logout(props.token).then(response=>{
      console.log(response);
  });
  }
</script>

<style scoped>
.logo-name{
  color: #fff;
  line-height: 60px;
}
.header-right{
  float: right;
}
.flex-grow {
  flex-grow: 1;
}
:deep(.el-menu--horizontal){
  border-bottom: none;
}
</style>